<%@ taglib prefix="v-bind" uri="http://www.springframework.org/tags/form" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人信息</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" type="text/css" href="../../static/common/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../static/css/global.css">
</head>
<body>
<div id="content">
    <div class="admin-main">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>导入学生信息</legend>
        </fieldset>

        <form class="layui-form" action="" method="post">
            <%--院校 Begin--%>
            <div v-cloak>
                <div class="layui-form-item">
                    <div>
                        <label class="layui-form-label">所属系</label>
                        <div class="layui-input-inline">
                            <select name="department" lay-filter="department" lay-search>
                                <option value="">选择系部</option>
                            </select>
                        </div>
                        <div class="layui-input-inline">
                            <select name="major" lay-filter="major" lay-search>
                                <option value="">选择专业</option>
                            </select>
                        </div>
                        <div class="layui-input-inline">
                            <select name="clazz" lay-filter="clazz" lay-search>
                                <option value="">选择班级</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <%--院校 End--%>
            <div class="layui-form-item">
                <label class="layui-form-label">导入学生</label>
                <div class="layui-input-inline">
                    <input type="file" name="fileUp" id="student" lay-type="file" class="layui-upload-file">
                    <a id="errorData" style="display: none" ></a>
                </div>
                <div class="layui-input-inline">
                    <a href="/download/StudentTemp" class="layui-btn layui-btn-normal layui-btn-small">下载导入数据模板</a>
                </div>
            </div>
        </form>
        <fieldset class="layui-elem-field">
            <legend>学生信息</legend>
            <div class="layui-field-box layui-form">
                <table class="layui-table admin-table">
                    <thead>
                    <tr>
                        <th>班级</th>
                        <th>学号</th>
                        <th>姓名</th>
                    </tr>
                    </thead>
                    <%--内容容器--%>
                    <tbody id="content1">
                    </tbody>
                </table>
            </div>
        </fieldset>

        <%--分页容器--%>
        <div class="admin-table-page">
            <div id="paged" class="page">
            </div>
        </div>
    </div>
</div>
</body>
<!--模板-->
<script type="text/html" id="tpl">
    {{# layui.each(d.data, function(index, item){ }}
    <tr>
        <td>{{ item.class.name || "-"}}</td>
        <td>{{ item.user.workid || "-" }}</td>
        <td>{{ item.user.realname || "-" }}</td>
    </tr>
    {{# }); }}
</script>
<script type="text/javascript">
    var userid = ${sessionScope.currentUser.getId()};
</script>
<script type="text/javascript" src="/static/common/jquery-3.2.1.js"></script>
<script type="text/javascript" src="../../static/js/utils.js"></script>
<script type="text/javascript" src="/static/common/layui/layui.js"></script>
<script type="text/javascript" src="/static/common/vue.min.js"></script>
<script type="text/javascript" src="/static/common/axios.min.js"></script>
<script>
    layui.config({
        base: '/static/js/layuiModulesEX/'
    });
    layui.use(['form', 'upload', 'jquery', 'layer', 'paging'], function () {
        var form = layui.form(),
            $ = layui.jquery,
            paging = layui.paging(),
            layer = layui.layer;
        var vm = new Vue({
            el: '#content'
            , data: {
                schoolManagerInfo: {
                    id: userid
                },
                attribution: {}
            }
        });


        //获取学院id
        axios.get('/schoolMangerInfo/findByUserId/' + userid)
            .then(function (res) {
                vm.attribution.school = res.data.data.schoolid;
                linkage.read(department, '/department/findBath/' + res.data.data.schoolid);
            })
            .catch(function (res) {
                console.log(res);
            });

        paging.init({
            openWait: true,
            url: '/student/findDetailBatchBySchoolId',
            elem: '#content1', //内容容器
            params: { //发送到服务端的参数
                userid: userid
            },
            contentType: "application/json; charset=utf-8",
            type: 'POST',
            tempElem: '#tpl', //模块容器
            pageConfig: { //分页参数配置
                elem: 'paged', //分页容器
                pageSize: 10 //分页大小
            },
            success: function (res) { //渲染成功的回调
                //alert('渲染成功');
            },
            fail: function (msg) { //获取数据失败的回调
                //alert('获取数据失败')
            },
            complate: function () { //完成的回调
                //alert('处理完成');
            }
        });

        //联动对象
        var linkage = {};
        //初始化
        linkage.formRender = function (obj, tip) {
            $(obj).empty();
            $(obj).append('<option value="">' + tip + '</option>');
            form.render('select');
        };
        //渲染下拉框
        linkage.read = function (obj, url, init) {
            axios.get(url)
                .then(function (res) {
                    var array = res.data.data;
                    var html = '';
                    for (var i in array) {
                        html += '<option value=' + array[i].id + '>' + array[i].name + '</option>';
                    }
                    $(obj).append(html);
                    form.render('select');
                    if (init)
                        $(obj).next().find('[lay-value="' + id + '"]').click();
                })
                .catch(function (res) {
                    console.log(res);
                });
        };

        var department = 'form select[name=department]',
            major = 'form select[name=major]',
            clazz = ' form select[name=clazz]';

        if ($(major).length) {
            linkage.formRender(department, "选择系");
            form.on('select(department)', function (data) {
                vm.attribution.department = data.value;
                linkage.formRender(major, "选择专业");
                linkage.formRender(clazz, "选择班级");
                linkage.read(major, '/major/findBath/' + data.value);
            });
            if ($(clazz).length) {
                linkage.formRender(department, "选择系");
                linkage.formRender(major, "选择专业");
                form.on('select(major)', function (data) {
                    vm.attribution.major = data.value;
                    linkage.formRender(clazz, "选择班级");
                    linkage.read(clazz, '/class/findBatchByMajorid/' + data.value);
                });
            }
        }

        form.on('select(clazz)', function (data) {
            vm.attribution.clazz = data.value;
        });
        layui.upload({
            url: '/upload/addStudentBatch', //上传接口
            elem: '#student'
            , success: function (res) { //上传成功后的回调
                paging.get();
                if (res.success){
                    layer.msg("导入成功");
                }
                else {
//                    axios.post("/download/errorData",res.data)
//                        .then(function(){
//                            console.log("下载成功");
//                        })
//                        .catch(function () {
//                            console.log("下载失败");
//                        })
                }
            }
            , before: function (input) {
                console.log('文件上传中');
                var data = {
                    "schoolId": vm.attribution.school,
                    "departmentId": vm.attribution.department,
                    "majorId": vm.attribution.major,
                    "classId": vm.attribution.clazz
                };
                extraData(input, data);
            }

        });
    })
</script>